<div class="navButtonsTop rounded-corners">
	<h1 class="title"><g:message code="title.comic.list"/></h1>
</div>

<div class="element rounded-corners">
	<g:if test="${comicInstanceList}">
		<g:if test="${session.comicViewMode == 'flow'}">
			<div class="scroll rounded-corners">
				<g:each in="${comicInstanceList}" var="comicInstance">
					<div class="item ${comicInstance.disabled ? 'disableItem' : ''}" >
						
						<img class="portada" src="${resource(file:comicInstance?.pathFileThumbnail)}"/>
			
						<div class="resumen">
							<label>${comicInstance.title}</label>
						</div>
						
						<div class="botones">
							<g:form class="actionDefault" controller="comic" action="show">
								<g:hiddenField name="id" value="${comicInstance?.id}"/>
								<g:submitButton class="itemButton showDetails" name="showDetails" value="${message(code:'default.button.details')}" />
							</g:form>

							<g:if test="${comicInstance?.page}">							
								<input type="button" class="itemButton show js_run" name="show" value="${message(code:'default.button.play')}" />
								
							    <div class="hidden js_play">
									<g:set var="orderedPages" value="${comicInstance?.page.sort{it.numberPage}}" />
									<g:each in="${orderedPages}" var="pageInstance">
										<a class="lightbox" href="${resource(file:pageInstance?.pathFile)}" rel="lightbox[${comicInstance.id}]" title="${pageInstance?.title}"></a>
									</g:each>	
								</div>
							</g:if>
						</div>
					</div>
				</g:each>
			</div>
		</g:if>
	
	
		<g:if test="${session.comicViewMode == 'list'}">
			<div class="rounded-corners tableList">
				<table>
		        	<thead>
		            	<tr>
		            		<th><g:message code="default.label.actions"/></th>
		            		<usr:isAdmin>
								<g:sortableColumn property="id" titleKey="default.label.id" />
								<g:sortableColumn property="disabled" titleKey="default.label.disabled" />
							</usr:isAdmin>
		               	    <g:sortableColumn property="title" titleKey="default.label.title" />
		               	    <th><g:message code="default.label.createdBy"/></th>
						</tr>
					</thead>
					<tbody>
		            	<g:each in="${comicInstanceList}" status="i" var="comicInstance">
		                	<tr class="${(i % 2) == 0 ? 'odd' : 'even'}">
	          		            <td><g:link controller="comic" action="show" id="${comicInstance.id}"><g:message code="default.label.show"/></g:link></td>
		                		<usr:isAdmin>
			                		<td>${fieldValue(bean: comicInstance, field: "id")}</td>
			                		<td><g:formatBoolean boolean="${comicInstance.disabled}" /></td>
		                		</usr:isAdmin>
		                        <td>${fieldValue(bean: comicInstance, field: "title")}</td>
								<td><g:link controller="user" action="show" id="${comicInstance.createdBy.id}">${comicInstance.createdBy.alias}</g:link></td>
		                    </tr>
		                </g:each>
					</tbody>
				</table>
			</div>
		</g:if>
	</g:if>

	<g:else>
		<div class="noData rounded-corners">
			<g:message code="default.no.comics"/>
		</div>
	</g:else>
</div>

<div class="paginateButtons rounded-corners">
	<div class="left">
		<g:paginate total="${comicInstanceTotal}"/>
	</div>
</div>